<template>
  <div class="wxServey">
    <div v-if="subject.type !=='sEnd'">
      <!--    v-if="currentType(['input','sNotice','sTitle','textarea'])"-->
      <div class="wrapper" :class="`servey-${subject.type}`">
        <div class="wrapper-label" :class="{'required':subject.topic.required}">{{ subject.label }}</div>
        <div class="wrapper-right">
          <!--    题目    -->
          <el-input :type="input.inputType"
                    v-model="topic.title"
                    :rows="4"
                    resize="none"
                    :placeholder="subjectPlaceholder(subject)"/>
        </div>
      </div>
      <!--    选项   -->
      <div v-if="showOperations()" class="operations">
        <div v-if="topic.operations">
          <div v-for="(op,i) in topic.operations" :key="i" class="operation al-flex-row">
            <div class="wrapper-label">{{ op.type === 'other' ? '其他' : `选项${i + 1}` }}</div>
            <div class="wrapper-right">
              <el-input class="al-width-300" size="mini" placeholder="输入选项内容"
                        :disabled="op.type === 'other'"
                        v-model="op.label"/>
              <i class="el-icon-close" style="color:#2c3e50;cursor:pointer;" @click="removeOperation(i)"/>
            </div>
          </div>

        </div>
        <div style="margin:4px 90px 4px;">
          <el-button size="mini" type="primary" @click="addOperation(0)">新增选项</el-button>
          <el-button v-if="!hasOtherOpera" size="mini" type="info" @click="addOperation(1)">添加其他</el-button>
        </div>
      </div>

      <!--    设置   -->
      <div v-if="showSetting()" class="servet-set">
        <el-checkbox v-model="topic.required">必填</el-checkbox>
      </div>
    </div>

    <div v-else>
      <div class="wrapper">
        <div class="wrapper-label">结束语</div>
        <div class="wrapper-right">
          <el-input type="textarea"
                    v-model="subject.topic.endText"
                    :rows="4"
                    resize="none"
                    :placeholder="subjectPlaceholder(subject)"/>
        </div>
      </div>

      <div class="wrapper" style="margin-top:10px;">
        <div class="wrapper-label">上传图片</div>
        <div class="wrapper-right">
          <wx-file-upload @success="e=>subject.topic.image=e"
                          :limit="1"
                          :list="subject.topic.image.url"
                          :fileTypes="['png','jpg','jpeg']"
                          tips="大小不超过2M的jpg、jpeg、png格式图片"/>
        </div>
      </div>
    </div>

  </div>
</template>

<script>/**
 * 调研问卷题目
 * @change 直接修改父组件数据
 */
import {isArray} from "@/utils/validate";
import {randomStr} from "@/utils/ruoyi";
import WxFileUpload from "@/components/wxqy/wxFileUpload/wxFileUpload";

export default {
  name: "wxServey",
  components: {WxFileUpload},
  props: {
    question: Object
  },
  watch: {
    question: {
      immediate: true,
      handler(value) {
        this.subject = value
        this.topic = value.topic || {}
        let type = value.type
        this.type = type
        this.input.allowEdit = type === 'input'
        this.input.topic = !['sNotice', 'sTitle'].includes(type)
        if (['sNotice'].includes(type)) {
          this.input.inputType = 'textarea'
        }
        // 存在topic，表示老数据
        if (value.topic && value.topic.operations) {
          this.hasOtherOpera = !!value.topic.operations.filter(p => p.type === 'other').length
        }
      }
    },
  },
  data() {
    return {
      type: null,
      subject: this.question,
      topic: this.question.topic || {},
      hasOtherOpera: false,
      input: {
        inputType: 'text',
        allowEdit: true,
        topic: true
      }
    }
  },
  methods: {
    currentType(elType) {
      if (isArray(elType)) {
        return elType.includes(this.type)
      }
      return elType === this.type
    },
    subjectPlaceholder(subject) {
      return subject.placeholder || '请输入题目'
    },
    showOperations() {
      return ['radio', 'checkbox'].includes(this.subject.type)
    },
    showSetting() {
      return !['sNotice', 'sTitle'].includes(this.subject.type)
    },
    // changeTopic() {
    //   let newTopic = Object.assign({}, this.topic)
    //   // this.$emit('change', newTopic)
    // },
    removeOperation(index) {
      if (this.topic.operations[index].type === 'other') {
        this.hasOtherOpera = false
      }
      this.topic.operations.splice(index, 1)
    },
    addOperation(other) {
      if (!this.topic.operations) {
        this.$set(this.topic, 'operations', [])
      }

      if (!!other) {
        this.topic.operations.push({label: '', type: 'other', value: 'other'})
        this.hasOtherOpera = true
      } else if (this.hasOtherOpera) {
        let len = this.topic.operations.length
        this.topic.operations.splice(len - 1, 0, {label: '', type: this.subject.type, value: randomStr(10)})
      } else {
        this.topic.operations.push({label: '', type: this.subject.type, value: randomStr(10)})
      }
      console.log(JSON.stringify(this.topic.operations))
    }
  }
}
</script>

<style scoped lang="scss">
.wxServey {
  //margin: 14px;
  //padding: 20px 0;
}

.wrapper {
  display: flex;
}

.required::before {
  content: '*';
  color: #f12323;
}

.servey-sTitle, .servey-input {
  align-items: center;
}

.wrapper-label {
  margin-top: 4px;
  width: 80px;
  color: #5c5d5e;
  text-align: right;
  font-size: 14px;
}

.wrapper-right {
  flex: 0.8;
  margin-left: 10px;

  .topic {
    margin: 4px 0;
  }
}

.operations {
  .operation {
    margin: 4px 0;
  }
}

.servet-set {
  margin: 10px 90px 4px;
}
</style>
